<template>
  <div>
    <div>
      <span>欢迎来到添加题目模板</span>
      <el-divider></el-divider>
    </div>

    <!-- label-position表单域便签的位置 -->
    <el-form
      :model="questionsForm"
      label-width="100px"
      :label-position="labelPosition"
      :rules="rules"
      ref="questionsRef"
    >
      <!-- 题目 -->
      <!-- prop是用来校验的 -->
      <el-form-item label="题目" prop="questions">
        <el-input v-model="questionsForm.questions" type="textarea" autosize placeholder="请输入题目"></el-input>
      </el-form-item>

      <!-- 答案 -->
      <el-form-item label="答案" prop="answers">
        <el-input
          v-model="questionsForm.answers"
          type="textarea"
          placeholder="请输入答案"
          autosize
          class="kuan"
        ></el-input>
      </el-form-item>

      <!-- 关键词 -->

      <el-form-item
        v-for="(domain, index) in questionsForm.keys"
        :key="index"
        :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
        class="keystyle"
      >
        <div class="keys">
          <div>
            <span>关键词{{index+1}}</span>
            <el-input v-model="domain.value"></el-input>
          </div>

          <div>
            <span>分值{{index+1}}</span>
            <el-input v-model="domain.score"></el-input>
          </div>
        </div>

        <div v-if="index == 0">
          <!-- @click.prevent 阻止事件的默认行为 -->
          <el-button @click.prevent="addDomain(domain)" type="primary" size="small" class="one">添加</el-button>
          <el-button @click.prevent="removeDomain()" size="small" type="info">删除</el-button>
        </div>
      </el-form-item>

      <el-form-item class="btn">
        <el-button type="primary" @click="alert.dialogVisible = true">提交</el-button>
        <el-button @click="resetForm('questionsForm')" class="two" type="info">取消</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="提示" :visible.sync="alert.dialogVisible" width="30%">
      <span>{{alert.info}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="alert.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('questionsForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionsForm: {
        keys: [
          {
            value: '',
            score: ''
          }
        ],
        questions: '',
        answers: ''
      },
      labelPosition: 'left',
      rules: {
        // 这个questions和answers对于的是data中的
        questions: [{ required: true, message: '请输入题目', trigger: 'blur' }],
        answers: [{ required: true, message: '请输入答案', trigger: 'blur' }]
      },
      valstr: '',
      scorestr: '',
      uid: this.$store.state.userId,
      alert: {
        dialogVisible: false,
        info: '此操作将提交该题目, 是否继续?'
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.questionsRef.validate(async valid => {
        if (!valid) return
        this.alert.dialogVisible = false
        this.getString()
        console.log(this.scorestr)
        const { data: res } = await this.$http({
          method: 'post',
          url: 'user/question/putQuestion',
          data: {
            details: this.questionsForm.questions,
            formatAnswer: this.questionsForm.answers,
            keyScore: this.scorestr,
            keyWords: this.valstr,
            teacherId: this.uid
          }
        })

        console.log(res)
        if (res.code !== 200) return this.$message.error('操作失败')
        this.$message.success('操作成功')
      })
    },

    // 取消按钮，重置
    resetForm() {
      this.$refs.questionsRef.resetFields()
    },

    removeDomain() {
      var index = this.questionsForm.keys.length - 1

      // +如果数组元素只有一个不可删除

      console.log(index)
      if (index > 0) {
        // 要删除的第一项的位置和要删除的项数
        this.questionsForm.keys.splice(index, 1)
      } else {
        this.$message.warning('该项不可删除!')
      }
    },

    addDomain() {
      this.questionsForm.keys.push({
        value: '',
        score: '',
        key: Date.now()
      })

      console.log(this.questionsForm.keys)
    },

    // 拼成字符串
    getString() {
      var str = ''

      str = this.questionsForm.keys
        .map(function(elem, index) {
          return elem.value
        })
        .join(',')
      this.valstr = str

      str = ''

      str = this.questionsForm.keys
        .map(function(elem, index) {
          return elem.score
        })
        .join(',')
      this.scorestr = str

      console.log(str)
    }
  }
}
</script>

<style lang="less" scoped>
.kuan {
  /deep/ .el-textarea__inner {
    height: 120px !important;
  }
}

.btn {
  margin-top: 80px;
  .el-button {
    width: 25%;
  }
  .two {
    margin-left: 50px;
  }
}

.keystyle {
  /deep/ .el-form-item__content {
    margin-left: 0px !important;
    display: flex;
    // justify-content: space-between;
  }
  .keys {
    width: 83%;
    display: flex;
    div {
      display: flex;
      span {
        white-space: nowrap; /*强制span不换行*/
        width: 100px;
        display: inline-block;
      }
      .el-input {
        width: 50%;
      }
      width: 50%;
    }
  }

  .one {
    margin-left: -20px;
    margin-right: 20px;
  }
}

.el-textarea {
  width: 70%;
}
</style>